WebTextEditor provides three built-in pane modes: Media Gallery, Table Designer, and Form Control. However in certain scenarios, custom pane mode might need to be implemented. In this case, developers can utilize the extensible pane interface to create their own custom pane mode in Task Pane.

To create a custom pane mode, developer need to create a pane content class that is inherited from TaskPaneContent object and assign a unique ID to the class.

Javascript	Copy Code
function EmoticonPane() { TaskPaneContent.call(this); //inherit from TaskPaneContent object this .Id = "Emoticon"; }

 

Several properties can be specified for the custom pane content: 

• Type
  This is mandatory property that should have unique value that indicates the pane content type implemented.
  
  
• Caption
  Determines the caption of the pane content. The value will be used as the header text in pane content.
  
  
• Image
  Determines the image of pane content. The value will be used as the image of the pane content in Task Pane menu item.
  
  
• ShowHeader
  Determines whether or not the header should be enabled. Default value is True.
  
  
• ShowToolBar
  Determines whether or not the toolbar should be enabled. Default value is True.
  
  
• AllowMaximize
  Determines whether or not the pane is allowed to be maximized. Default value is False.
  
  
• AllowClose
  Determines whether or not the pane is allowed to be closed. Default value is True.
  
  
• AllowResize
  Determines whether or not the pane is allowed to be resized. Default value is True.
  
  
• AllowContentOptions
  Determines whether or not the icon to show available pane content mode should be displayed. Default value is True.
  

 

Besides the properties, several interfaces can also be implemented:

• GetContainerElement.
  This is mandatory function that should be implemented. This function should return the element that will be included in the content area of
  Task Pane.
  
  
• OnCreate
  Specifies the event that will be invoked when the pane content is being created. The above pane content properties should be specified in this event. If toolbar is enabled, the toolbar commands should be added in this event.
  
  
• OnInitialize
  Specifies the event that will be invoked when the pane content is being initialized. In this event, developer could implement function to initialize default values for input fields in the content area and so on.
  
  
• OnClose
  Specifies the event that will be invoked when the pane content is being closed.
  
  
• OnMaximize
  Specifies the event that will be invoked when the pane content is being maximized.
  
  
• OnContentOptionsSelected
  Specifies the event that will be invoked when an item in Task Pane menu is selected.
  
  
• OnResize
  Specifies the event that will be invoked when Task Pane is being resized.
  
  
• OnAfterRender
  specifies the event that will be invoked after content rendering process is finished. In this event, developer can register behaviors to elements in the content area or insert new elements to the content area.
  
  
• OnShow
  Specifies the event that will be invoked when the pane content is being shown.
  
  
• OnUnload
  Specifies the event that will be invoked when the pane content is being unloaded. In this event, developer can unregister the behaviors attached to elements in the content area to avoid memory leak. Note that the pane is not unloaded when user switches between pane modes.
  

After the custom pane object is ready, it should be registered in WebTextEditor using RegisterPaneContent function. The custom pane object should be registered when WebTextEditor is initialized, in OnInitialize client-side event.

The custom pane is ready to use. To open the custom pane, developer could add custom command in main toolbar and open Task Pane when the command is clicked.

In This Section

Walkthrough: Creating Custom Task Pane Content

See Also

 

 

---

© 2013 Intersoft Solutions Corp. All Rights Reserved.